<div class="card mb-3">
    <div class="card-header">
        <h4>{{ title }}</h4>
    </div>
    <div class="card-body">
        <pagination></pagination>
        <div class="card" ng-repeat="request in table" style="margin-bottom: 10px">
            <div class="card-header d-flex flex-row justify-content-between">
                <div>
                    <h6>{{ request.type }}</h6>
                    <h6>Number of occurences: {{ request.count }}</h6>
                </div>
                <div>
                    <h6>{{ request.message }}</h6>
                    <h6>
                        Latest: {{ request.latest_timestamp | dateDifference }} 
                        | First: {{ request.first_timestamp | dateDifference }}
                    </h6>
                </div>
                <div class="d-flex gap-2 p-2">
                    <button class="btn btn-danger rounded"
                            ng-click="deleteExceptionByStackTraceId(request.stack_trace_snapshot_id)">
                        Delete
                    </button>
                    <button class="btn btn-secondary rounded"
                            ng-click="collapseDetailsByStackTraceId(request.stack_trace_snapshot_id)">
                        Collapse
                    </button>
                </div>
            </div>
            <table class="table table-bordered table-hover" width="100%" style="margin: 0" cellspacing="0">
                <tbody>
                    <tr ng-repeat="row in request.stack_trace_snapshot"
                        ng-init="key = getUniqueKey(request.stack_trace_snapshot_id, row.position)">
                        <td style="padding-left: 10px;">
                            <details ng-click="loadFunctionCodeById(row.function_definition_id, key)"
                                     id="details_{{request.stack_trace_snapshot_id}}">
                                <summary class="tooltip-wrapper">
                                    {{ row.file_path }}
                                    <span class="tooltip">{{ row.full_file_path }}</span>
                                    <span style="color: grey;">in</span> {{ row.function_name }}
                                    <span style="color: grey;">at</span> {{ row.line_number }}
                                </summary>
                                <div ng-if="idHasBeenClicked[key]" 
                                     ng-init="function_code = id2Function[row.function_definition_id]; highlightCode(key)">
                                    <pre class="line-numbers" style="white-space: pre"
                                         data-line="{{row.line_number}}"
                                         data-line-offset="{{row.function_start_line_number}}"
                                         data-start="{{row.function_start_line_number}}">
                                        <code class="language-python" id="{{ key }}">
                                            {{ function_code }}
                                        </code>
                                    </pre>
                                </div>
                            </details>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <pagination></pagination>
    </div>
    <endpointdetails></endpointdetails>
</div>
